<template>
	<view class="faxian">
		<view class="titbiaoHead">
			<view class="title">
				<view class="scommo" @tap="tit(index)" :class=" item.yun?'red':'' "  v-for="(item,index) in titles" :key="item.id">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="boox">
		<!-- 占位置的没用标签，不要删哦 -->	
		</view>
		<!-- 精选文章 -->
		<view class="imgpic" v-if="sho">
			<view class="xfqyyds" v-for="item in wenList" :key="item.id">
				<image :src="item.coverImg" mode=""  @tap="gouxiangqing(item.id)"></image>
				<view class="fawen">
					<view class="fawenleft">
						<view class="iconfont icon-yanjing02-xianxing icon"></view>
						<view class="yuedu">
							{{item.viewCount}}
						</view>
					</view>
					<view class="fawenRight">
						<view class="iconfont icon-shoucang icon" :class="sho == true?'red':''"  @click="shoucang(item.id)">
							
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 品牌列表 -->
		<view class="pinpai" v-if="!sho">
			<view class="xfqyyds" v-for="item in faxianList" :key="item.id" >
				<image :src="item.bigPic" mode="" @tap="gouxiangqing(item.id)"></image>
				<view class="fawen">
					<view class="fawenleft">
						<view class="iconfont icon-yanjing02-xianxing icon"></view>
						<view class="yuedu">
							{{item.viewCount}}
						</view>
					</view>
					<view class="fawenRight">
						<view class="iconfont icon-shoucang icon" :class="sho == true?'red':'' " @click="shoucang(item.id)">
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { faxian,wenzhang } from "../../api/faxian/faxian.js"
	export default {
		name:"Faxian",
		data() {
			return {
				titles:[
					{
						id:1, 
						name:"精选文章",
						yun:true
					},
					{
						id:2,
						name:"品牌列表",
						yun:false
					}
				],
				sho:true,
				// 品牌
				faxianList:[],
				// 文章
				wenList:[],
				sho:false
			};
		},
		methods:{
			// 标题部分点击切换
			tit(e){
				// 获取所有对象
				let tit = this.titles
				// 把对象遍历，在根据传过来的 index 来对比
				tit.forEach((v,i)=>i==e?v.yun=true:v.yun=false);
				this.sho = !this.sho
			},
			
			gouxiangqing(id){
				console.log(id)
				uni.navigateTo({
					url:`/pages/faxianXiangqing/faxianXiangQing/faxianXiangQing?id=${id}`
				})
			},
			// 收藏
			shoucang(id){
				var assId = id
				console.log(assId)
				var resultList = uni.getStorageSync('token')
				console.log(resultList)
				if(resultList){
					//  提取收藏的数组，有的话就添加，没得话就创建
					const xfqyydsListKed = uni.getStorageSync('xfqyydsList')
					//  1）先判断有没有收藏过，
					if(!xfqyydsListKed){
						// 没有收藏的 那个数组（showCleakedList），就添加进去
						uni.setStorageSync('xfqyydsList',[assId])
						this.sho = true
					}else{
						// 有收藏的那个数组 （showCleakedList） 就根据 存进了的 id 来在数组里吗遍历， 有的话就取消收藏，没有的话就添加收藏
						var itens = xfqyydsListKed.find(ele => ele == assId)
						// 找到对应下标
						var itenx = xfqyydsListKed.findIndex(ele => ele == assId)
						if(itens){
							// 存储过  删除
							this.sho = false
							xfqyydsListKed.splice(itenx,1)
						} else {
							// 没存储过  添加
							this.sho = true
							xfqyydsListKed.push(assId)
						}
						// 再把修改后的值 重新 存进数组里
						uni.setStorageSync('xfqyydsList',xfqyydsListKed)
					}
				} else{
					uni.showModal({
						title: '登录提示',
						content: "暂未登录，是否立即登录",
						success(res) {
							console.log(res)
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}
			}
		},
		onLoad(){
			faxian(1,20).then(res=>{
				console.log(res)
				this.faxianList = res.data.data.rows
			});
			wenzhang(1,19).then(res=>{
				console.log(res)
				this.wenList = res.data.data.rows
			});
			const xfqyydsListKed = uni.getStorageSync('xfqyydsList')
			//  1）先判断有没有收藏过，
			if(!xfqyydsListKed){
				this.sho = false
			}else{
				var itens = xfqyydsListKed.find(ele => ele == id)
				
				if(itens){
					// 存储过  删除
					this.sho = true
					
				} else {
					// 没存储过  添加
					this.sho = false
					
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.faxian{
	background-color: #f4e8ab;
	height: 100vh;
	position: relative;
	.titbiaoHead{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 9999;
		background-color: #094f01;
		.title{
			margin: 0 auto;
			width: 200rpx;
			height: 100%;
			display: flex;
			justify-content:space-between;
			line-height: 100rpx;
			.scommo{
				font-size: 16rpx;
				color:#fff;
				height: 90%;
				border-bottom: 2rpx solid rgba(255,255,255,.0);
			}
			.red{
				border-bottom: 2rpx solid #fff;
			}
		}
	}
	.boox{
		width: 100%;
		height: 50rpx;
		background-color: #f4e8ab;
	}
	.imgpic{
		width: 100%;
		padding: 0 40rpx;
		background-color: #f4e8ab;
		box-sizing: border-box;
		.xfqyyds{
			width: 100%;
			// margin: 0 auto 40rpx;
			border: 2rpx solid rgba(0,0,0,.6);
			background-color: #f4e8ab;
			margin-bottom: 40rpx !important;
			image{
				width: 100%;
				// height: 190rpx !important;
			}
			.fawen{
				width: 100%;
				height: 90rpx;
				font-size: 35rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.fawenleft{
					display: flex;
					align-items: center;
					.icon{
						width: 19rpx;
						height: 19rpx;
						margin: 20rpx;
					}
				}
				.fawenRight{
					.icon{
						font-size: 40rpx;
					}
					.red{
						color: red;
					}
				}
			}
		}
	}
	.pinpai{
		width: 100%;
		padding: 0 40rpx;
		background-color: #f4e8ab;
		box-sizing: border-box;
		.xfqyyds{
			width: 100%;
			margin: 0 auto 40rpx;
			border: 2rpx solid rgba(0,0,0,.6);
			background-color: #f4e8ab;
			image{
				width: 100%;
				// height: 190rpx !important;
			}
			.fawen{
				width: 100%;
				height: 90rpx;
				font-size: 35rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.fawenleft{
					display: flex;
					align-items: center;
					.icon{
						width: 19rpx;
						height: 19rpx;
						margin: 20rpx;
					}
				}
				.fawenRight{
					.icon{
						font-size: 40rpx;
					}
					.red{
						color: red;
					}
				}
			}
		}
	}
}
</style>
